<template>
	<div class="">
		<el-table :data="orders">
			<el-table-column prop="serial_number" label="订单编号"></el-table-column>
			<el-table-column label="所属品牌">
				<template scope="scope">
					{{scope.row.company_name}}
				</template>
			</el-table-column>
			<el-table-column prop="customer_service_info.name" label="测量师傅"></el-table-column>
			<el-table-column prop="service_info.name" label="安装师傅"></el-table-column>
			<el-table-column label="下单时间">
				<template scope="scope">
					{{scope.row.created_at | conver_time}}
				</template>
			</el-table-column>
			<el-table-column label="订单状态">
				<template scope="scope">
					<el-tag :type="states(scope.row).type">{{states(scope.row).name}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template scope="scope">
					<el-button @click="goShow(scope)" type="text" size="small">详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination class="order-el-pagination pull-right" @current-change="updatePage" :current-page="params.page" :page-size="25" layout="total, prev, pager, next" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import filters from '../../../utils/filters'

	export default {
		computed: {
			...mapGetters('orders', [
				'orders',
				'total',
				'params'
			])
		},
		methods: {
			states: filters.states,
			...mapActions('orders', [
				'setOrders'
			]),
			updatePage(val) {
				this.setOrders({ page: val })
			},
			goShow(data) {
				this.$router.push({ name: 'order', params: { id: data.row.id } })
			}
		}
	}
</script>